.controls
  position: absolute
  z-index: 10
  display: grid
  grid-template-columns: repeat(3, 46px)
  height: 32px
  top: 0
  right: 0
  font-family: "Segoe MDL2 Assets", sans-serif
  -webkit-app-region: no-drag
  .control
    grid-row: 1 / span 1
    display: flex
    justify-content: center
    align-items: center
    width: 100%
    height: 100%
    font-size: 10px
    user-select: none
    cursor: default
    color: #333
    &:hover
      background: #e6e6e6
    &.min-button
      grid-column: 1
    &.max-button, &.restore-button
      grid-column: 2
    &.restore-button
      display: none
    &.close-button
      grid-column: 3
    &.close-button
      &:hover
        background: #E81123
        color: #fff
      &:active
        background: #F1707A
